﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系人图谱</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="showTitle">
<text class="text-field" id="Customer" style="font-size:20px;"></text>
<text class="text-field" id="totalPageRank" style="font-size:20px; color:#DC143C"></text>
<text class="text-field" id="Statistics" onclick ="showWaring()" style="font-size:10px; color:#DDDDDD;" >点击查看详请</text>
</div>
<div id="mountNode">
        <svg style="position: absolute; overflow: visible; padding: 10px; top: 461px; left: 1251px; width: 85px; height: 100px;">
        <g class="legendCells">
            <g class="cell" transform="translate(0, 0)">
                <circle class="swatch" r="10" style="fill:#BE3430;stroke:rgb(255,255,255); "></circle>
                <text class="label" transform="translate( 15, 5)"style="fill:#444444">被保险人</text></g>
            <g class="cell" transform="translate(0, 29)">
                <circle class="swatch" r="10" style="fill:#2F4554;stroke:rgb(255,255,255); "></circle>
                <text class="label" transform="translate( 15, 5)"style="fill:#444444">赔案号</text></g>
            <g class="cell" transform="translate(0, 58)">
                <circle class="swatch" r="10" style="fill:#609EA6;stroke:rgb(255,255,255); "></circle>
                <text class="label" transform="translate( 15, 5)"style="fill:#444444">收款人</text></g>
            <g class="cell" transform="translate(0, 87)">
                <circle class="swatch" r="10" style="fill:#C98622;stroke:rgb(255,255,255); "></circle>
                <text class="label" transform="translate( 15, 5)"style="fill:#444444">报案人</text></g>
        </g>
    </svg>
</div>
<script src="js/common.js"></script>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.0.2/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/d3-4.13.0.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.0.2/build/minimap.js"></script>
<style>
    .g6-tooltip {
        border: 2px solid #FFFFFF;
        border-radius: 4px;
        font-size: 12px;
        color: #1A1A1A;
        background-color: rgba(255,255,255,1);
        padding: 10px 8px;
    }
    /*.g6-minimap {*/
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 6px;*/
    /*background-color: #fff;*/
    /*}*/
</style>
<script>
    let allTimeUnit;
    function watchProperties(model){
        if(model.type == "被保险人"){
            return model.type+"："+model.name+"，身份证号："+model.properties.身份证;
        }else if(model.type == "赔案号"){
            return model.type+"："+model.name+"，报案时间："+model.properties.报案+"，出险时间："+model.properties.出险+"，保单号："+model.properties.保单+"，保险起期："+model.properties.起期+"，保险止期："+model.properties.止期;
        }else if(model.type == "收款人"){
            return model.type+"："+model.name+"，银行卡号："+model.properties.银行卡+"，热度："+model.properties.热度得分;
        }else if(model.type == "报案人"){
            return model.type+"："+model.name+"，报案电话："+model.properties.报案电话;
        }
    }
    function showOperation() {
        alert("Iam a operation node");
    }
    function showWaring() {
        myWindow=window.open('','','width=800,height=600');
        myWindow.document.write("<p>基本属性:"+"<br>"+allTimeUnit.Customer+"</p>");
        myWindow.document.write("<p>理赔赔案:"+"<br>"+allTimeUnit.Claim+"</p>");
        myWindow.document.write("<p>关联情况："+"<br>"+allTimeUnit.Statistics+"</p>");
        myWindow.document.write("<p>风险评级："+"<br>"+allTimeUnit.Rank+"</p>");
        myWindow.document.write("<p>目标有效性："+"<br>"+allTimeUnit.Validity+"</p>");
        myWindow.document.write("<p>中介代理报案："+"<br>"+allTimeUnit.Intermediary+"</p>");
        myWindow.document.write("<p>亲属可能性："+"<br>"+allTimeUnit.Relatives+"</p>");
        myWindow.focus();
    }
    // $("#showTitle").css('backgroundColor', '#333333');
    // $("#mountNode").css('backgroundColor', '#333333');
    $("#mountNode").css('backgroundColor', '#f3f3f3');

    var minimap = new Minimap({
        size: [window.innerWidth / 4, window.innerHeight / 4]
    });
    var graph = new G6.Graph({
        container: 'mountNode',
        width: window.innerWidth,
        height: window.innerHeight,
        plugins: [minimap],
        autoPaint: false,
        modes: {
            default: ['drag-canvas', {
                type: 'tooltip',
                formatText: function formatText(model) {
                    return watchProperties(model);
                }
            },
            ]
        },
        nodeStyle: {
            default: {
                lineWidth: 2
            },
            highlight: {
                opacity: 1
            },
            dark: {
                opacity: 0.2
            }
        },
        edgeStyle: {
            default: {
                stroke: '#999',
                lineAppendWidth: 2
            },
            highlight: {
                stroke: '#e2e2e2'
            },
            dark: {
                stroke: '#444444'
            }
        }
    });

    function clearAllStats() {
        graph.setAutoPaint(false);
        graph.getNodes().forEach(function(node) {
            graph.clearItemStates(node);
        });
        graph.getEdges().forEach(function(edge) {
            graph.clearItemStates(edge);
        });
        graph.paint();
        graph.setAutoPaint(true);
    }
    graph.on('node:mouseenter', function(e) {
        var item = e.item;
        graph.setAutoPaint(false);
        graph.getNodes().forEach(function(node) {
            graph.clearItemStates(node);
            graph.setItemState(node, 'dark', true);
        });
        graph.setItemState(item, 'dark', false);
        graph.setItemState(item, 'highlight', true);
        graph.getEdges().forEach(function(edge) {
            if (edge.getSource() === item) {
                graph.setItemState(edge.getTarget(), 'dark', false);
                graph.setItemState(edge.getTarget(), 'highlight', true);
                graph.setItemState(edge, 'highlight', true);
                edge.toFront();
            } else if (edge.getTarget() === item) {
                graph.setItemState(edge.getSource(), 'dark', false);
                graph.setItemState(edge.getSource(), 'highlight', true);
                graph.setItemState(edge, 'highlight', true);
                edge.toFront();
            } else {
                graph.setItemState(edge, 'dark', true);
                graph.setItemState(edge, 'highlight', false);
            }
        });
        graph.paint();
        graph.setAutoPaint(true);
    });
    graph.on('node:mouseleave', clearAllStats);
    graph.on('canvas:click', clearAllStats);
    $.getJSON(window.location.protocol+"//"+window.location.host+"/visionAllData?insuredName="+getArgsFromHref(window.location.href,"insuredName")+"&insuredCode="+getArgsFromHref(window.location.href,"insuredCode")+"&registNo="+getArgsFromHref(window.location.href,"registNo")+"&plyNo="+getArgsFromHref(window.location.href,"plyNo"), function(data) {
        if(data.error!=null&&data.error!=undefined){
            alert(data.error);
        }
        allTimeUnit = data.informations[0];
        // document.getElementById("Customer").innerHTML ="被保险人:"+data.informations[0].Customer+","+data.informations[0].topRank+"。";
        document.getElementById("Customer").innerHTML ="被保险人("+data.informations[0].Customer+"):";
        document.getElementById("totalPageRank").innerHTML =data.informations[0].topRank;
        graph.data({
            nodes: data.nodes,
            edges: data.edges.map(function(edge, i) {
                edge.id = 'edge' + i;
                return Object.assign({}, edge);
            })
        });
        var simulation = d3.forceSimulation().force("link", d3.forceLink().id(function(d) {
            return d.id;
        }).strength(0.5)).force("charge", d3.forceManyBody()).force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2));
        simulation.nodes(data.nodes).on("tick", ticked);
        simulation.force("link").links(data.edges);

        graph.render();

        function ticked() {
            graph.refreshPositions();
            graph.paint();
        }
    });
</script>
</body>
</html>